<template>
  <div class="main">
    <!-- 主容器 -->
    <div class="container d-flex justify-content-center align-items-center">
      <div class="password-main">
        <div class="card shadow-sm p-4">
          <div class="card-header">重置密码</div>
          <form id="reset-password-form" @submit.prevent="handleSubmit" autocomplete="off">
            <!-- 输入手机号 -->
            <div class="form-group">
              <label for="phoneNumber"><i class="iconfont icon-shouji"></i> 手机号码</label>
              <input type="text" class="form-control" v-model="phoneNumber" placeholder="请输入手机号码" required />
            </div>

            <!-- 输入验证码 -->
            <div class="form-group">
              <label for="verificationCode"><i class="iconfont icon-yanzhengma"></i> 验证码</label>
              <div class="input-group">
                <input
                    type="text"
                    class="form-control"
                    v-model="verificationCode"
                    style="margin-right: 20px; border-radius: 25px"
                    placeholder="请输入验证码"
                    required
                />
                <div class="input-group-append">
                  <button type="button" class="get-code-btn" @click="sendVerificationCode" :disabled="isSendingCode">
                    {{ isSendingCode ? '发送中...' : '获取验证码' }}
                  </button>
                </div>
              </div>
            </div>

            <!-- 输入新密码 -->
            <div class="form-group">
              <label for="newPassword"><i class="iconfont icon-mima"></i> 新密码</label>
              <input
                  type="password"
                  class="form-control"
                  v-model="newPassword"
                  placeholder="请输入新密码"
                  required
              />
            </div>

            <!-- 确认新密码 -->
            <div class="form-group">
              <label for="confirmPassword"><i class="iconfont icon-querenmima"></i> 确认新密码</label>
              <input
                  type="password"
                  class="form-control"
                  v-model="confirmPassword"
                  placeholder="请确认新密码"
                  required
              />
            </div>

            <!-- 提交按钮 -->
            <div class="mb-3" style="margin-top: 24px">
              <button type="submit" class="btn btn-primary w-100">提交</button>
            </div>

            <!-- 返回登录页面的链接 -->
            <div class="links-container">
              <router-link to="/userLogin">
                <a class="small">返回登录页面</a>
              </router-link>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from "../router/router.ts"; // 使用 Element Plus 弹出提示框

// 表单输入
const phoneNumber = ref('');
const verificationCode = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
const isSendingCode = ref(false);
const userId = localStorage.getItem('userId'); // 获取用户ID

// 发送验证码
const sendVerificationCode = async () => {
  if (!phoneNumber.value) {
    ElMessage.warning('请输入手机号');
    return;
  }

  try {
    isSendingCode.value = true;
    const response = await axios.post('/yonghu/user/sendCaptcha', {
      phoneNumber: phoneNumber.value
    });

    if (response.data.code === 1) {
      ElMessage.success('验证码已发送，请注意查收');
    } else {
      ElMessage.error('发送验证码失败，请稍后再试');
    }
  } catch (error) {
    ElMessage.error('请求发送验证码失败，请检查网络');
  } finally {
    isSendingCode.value = false;
  }
};

// 提交表单
const handleSubmit = async () => {
  // 验证新密码和确认密码是否一致
  if (newPassword.value !== confirmPassword.value) {
    ElMessage.error('两次输入的密码不一致');
    return;
  }

  // 密码长度和复杂性校验
  if (newPassword.value.length < 6) {
    ElMessage.error('密码长度必须大于6位');
    return;
  }

  try {
    const response = await axios.put(`/yonghu/user/resetPassword`, {
      phoneNumber: phoneNumber.value,
      password: newPassword.value
    });

    if (response.data.code === 1) {
      ElMessage.success('密码重置成功，请登录');
      await router.push('/userLogin');
    } else {
      ElMessage.error('密码重置失败，请稍后再试');
    }
  } catch (error) {
    ElMessage.error('请求失败，请检查网络连接');
  }
};
</script>


<style scoped>
.main {
  background: linear-gradient(to right, #af6bf7, #9fb8e2) no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.password-main {
  max-width: 400px;
  width: 100%;
}

.card {
  border: none;
  border-radius: 10px;
}

.card-header {
  background-color: #ffffff;
  border-bottom: none;
  text-align: center;
  font-size: 1.5rem;
  color: #6a11cb;
}

.form-control {
  border-radius: 20px;
}

.btn-primary {
  border-radius: 20px;
  background-color: #6a11cb;
  border-color: #6a11cb;
  padding: 10px 20px;
  font-size: 1.2rem;
}

.btn-primary:hover {
  background-color: #2575fc;
  border-color: #2575fc;
}

.small {
  color: #6a11cb;
}

.small:hover {
  color: #2575fc;
}

.links-container {
  text-align: center;
  margin-top: 10px;
}

.links-container a {
  margin: 0 10px;
}

.get-code-btn {
  background-color: #6a11cb;
  border-color: #6a11cb;
  padding: 5px 10px;
  font-size: 0.9rem;
  border-radius: 15px;
  color: white;
}

.get-code-btn:hover {
  background-color: #2575fc;
  border-color: #2575fc;
}
</style>
